import { useState, useEffect } from 'react';
import { Pie, measureTextWidth } from '@ant-design/plots';
import { queryObjectNum } from '@/services/panel'

const CircusChart = (props) => {
  const [data, setData] = useState(null)
  const { year, quarter, type } = props
  useEffect(()=>{
    // getData()
    setData([
      {
        type: '1',
        value: 12,
      },
      {
        type: '2',
        value: 13,
      },
      {
        type: '3',
        value: 23,
      },
      {
        type: '4',
        value: 31,
      },
      {
        type: '5',
        value: 16
      }
    ])
  },[year, quarter, type])
  const getData = async () => {
    const res = await queryObjectNum({year, quarter, type})
    if(res.code = 200){
      if(res.data.length > 0){
        const list = res.data.map((item)=>{
          return { type: item.username,value: item.num }
        })
        const numList = list.map(item => Number(item.value));
        const num = numList.reduce((prev,next)=>{ return prev+next })
        
        const newList = list.map((item)=>{
          const num2 = (Number(item.value)/num*100).toFixed(0);
          return { type: item.type, value: Number(num2) }
        })
        setData(newList);
      }
    }
  }
  const renderStatistic = (containerWidth, text, style) => {
    const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
    const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2

    let scale = 1;

    if (containerWidth < textWidth) {
      scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
    }

    const textStyleStr = `width:${containerWidth}px;`;
    return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
  }
  const config = {
    height: 200,
    appendPadding: 10,
    data,
    colorField: 'type',
    angleField: 'value',
    radius: 1,
    innerRadius: 0.64,
    meta: {
        value: {
          formatter: (v) => `${v} %`,
        },
      },
    label: {
        type: 'inner',
        offset: '-50%',
        style: {
          textAlign: 'center',
          color: '#ffffff'
        },
        autoRotate: false,
        content: '{value}',
      },
      statistic: {
        title: {
            offsetY: -4,
            customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect();
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                const text = datum ? datum.type : '总数';
                return renderStatistic(d, text, {
                  fontSize: 28,
                 
                });
            },
        },
        content: {
            offsetY: 4,
            style: {
              fontSize: '32px',
              
            },
            customHtml: (container, view, datum, data) => {
              const { width } = container.getBoundingClientRect();
              const text = datum ? `${datum.value}` : `${data.reduce((r, d) => r + d.value, 0)}`;
              return renderStatistic(width, text, {
                fontSize: 30,
              });
            },
          },
      },
      interactions: [
        {
          type: 'element-selected',
        },
        {
          type: 'element-active',
        },
        {
          type: 'pie-statistic-active',
        },
      ],
  };
  return <> {data && data.length > 0 && <Pie {...config} />}</>;
};

export default CircusChart;
